<template>
    <div v-loading="ifload">
        <quill-editor
            v-model="content"
            ref="myTextEditor"
            @change="onEditorChange($event)"
            :options="editorOption">
        </quill-editor>
        <el-dialog title="选择图片" :visible.sync="showAlbum" width="90%" center>
            <albumPic @selectImg="selectImg" :showType="1"></albumPic>
        </el-dialog>

	</div>
</template>
<script type="text/javascript">
	import {baseUrl,ajax_upload} from '@/components/js/request.js';
	import albumPic from '@/page/common/album/album_pic';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor, Quill } from 'vue-quill-editor';
	import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module';
	export default{
		components:{quillEditor,albumPic},
		props:{
            initContent:{type:String,default:''},
        },
		data() {
			return {
                showAlbum:false,
				ifload:false,
                uploadType:'image',
                content:'',
                serverUrl: baseUrl+'/common/qiniu',  // 这里写你要上传的图片服务器地址
                header: {},  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
                editorOption: {
                    placeholder: '',
                    theme: 'snow',  // or 'bubble'
                },
			}
		},
        watch:{
            initContent() {
                this.content = this.initContent;
            }
        },
        created() {
            this.content = this.initContent;
        },
        mounted() {
          this.$refs.myTextEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler);
          this.$refs.myTextEditor.quill.getModule('toolbar').addHandler('video', this.imgHandler);
        },
		methods:{

            //显示图库
            imgHandler() {
                this.showAlbum = true;
            },

            //选择图片
            selectImg(imgArr) {

                let quill = this.$refs.myTextEditor.quill;
                let addRange = this.$refs.myTextEditor.quill.getSelection();
                let len = addRange !== null ? addRange.index : 0
                imgArr.forEach((imgUrl) => {
                   // 插入图片  res.data为服务器返回的图片地址
                   let ext = imgUrl.split('.').pop();
                   let videoArr = ['mp4','flv','rmvb','swf'];
                   if(videoArr.indexOf(ext)>-1){
                       this.uploadType = 'video'
                   }else{
                       this.uploadType = 'image';
                   }
                   quill.insertEmbed(len,this.uploadType, imgUrl)
                   len++;
                   // 调整光标到最后
                   quill.setSelection(len)
                })
                this.showAlbum = false;
            },

            //编辑器内容变化
            onEditorChange(e) {
                // console.log(this.content);
                this.$emit('getContent',this.content)
            },
		},
	}
</script>

<style>
</style>
